<script setup>
import LeftComponents from "@/components/leftComponents.vue";
import {onMounted, ref, watch} from "vue";
import Http from "@/http/http.js";
import {getImgUrl} from "@/until/tool.js";
import LeftTypeComponent from "@/views/webLayout/leftTypeComponent.vue";
import {useRouter} from "vue-router";
import CheckBanner from "@/views/check/checkBanner.vue";

const pageObj = ref({
  total: 0,
  current: 1,
  pageSize: 16,
  showTotal: true,
  showJumper: false,
  showPageSize: true,
  pageSizeOptions: [15, 30, 50, 80, 100],
})
const router = useRouter()
const typeData = ref([])
const listData = ref([])
const typeId = ref(0)
const keyword = ref(null)
const typeName = ref("行业检测")
onMounted((async () => {
  await getTypeData()
  await getParams()
}))

const getParams = () => {
  if (Object.keys(router.currentRoute.value.query).length > 0) {
    typeId.value = Number(router.currentRoute.value.query.typeId);
    if (router.currentRoute.value.query.keyword) {
      keyword.value = router.currentRoute.value.query.keyword
    }
    getTypeName(typeId.value)
  }
  getListData()
}

const getTypeName = (typeId) => {
  typeData.value.forEach((d) => {
    if (d["TypeId"] === typeId) {
      typeName.value = d["TypeName"];
    }
  })
}


const getTypeData = async () => {
  const res = await Http.professionType()
  typeData.value = res.Data;
}
const getListData = async () => {
  let Obj = {current: pageObj.value.current - 1, pageSize: pageObj.value.pageSize}
  if (typeId.value > 0) {
    Obj['TypeId'] = typeId.value;
  }
  if (keyword.value) {
    Obj["Keyword"] = keyword.value
  }
  const res = await Http.profession(Obj)
  listData.value = res.Data.Data;
  pageObj.value.total = res.Data["DataCount"]
}

function onChange(current) {
  pageObj.value.current = current;
  getListData()
}

watch(
    () => router.currentRoute.value.query,
    (value) => {
      if (value) {
        typeId.value = Number(value.typeId);
        getTypeName(Number(value.typeId))
        getListData()
      }
    },
    {
      deep: true
    }
);
</script>

<template>
  <check-banner/>
  <div class="wid flex justify-between">
    <div class="win_left">
      <div class="left_title">
        <div class="left_title_top"><b>行业检测</b> <span><icon-list color="blue"/></span></div>
        <div class="left_title_con">
          <left-type-component v-show="typeData.length>0" :type-data="typeData" :type-id="3"/>
        </div>
      </div>
      <left-components/>
    </div>
    <div class="win_right">
      <div class="right_title">
        <span>{{ typeName }}</span>
      </div>
      <div class="con">
        <ul>
          <li v-for="item of listData"><a :href="`/checkDetail/${item.ProfessionId}`" :title="item.ProfessionTitle"><img :src="getImgUrl(item.ProfessionImg)" :alt="item.ProfessionTitle">
            <div class="item_mask">
              <div class="item_link_icon ico"></div>
            </div>
            <span>{{ item.ProfessionTitle }}</span></a></li>
        </ul>
      </div>
      <div class="w-1/1 flex justify-center m-b-30px">
        <a-pagination hideOnSinglePage v-model="pageObj.current" :pageSize="pageObj.pageSize" :total="pageObj.total" @change="onChange" show-less-items/>
      </div>
    </div>
  </div>

</template>

<style scoped lang="less">
.checkList {
  ul {
    width: 100%;display: flex;flex-wrap: wrap;

    li {
      width: 210px; margin-bottom: 20px;margin-right: 15px;border: 1px solid #F6F6F6;line-height: 24px;

      a {
        display: block;width: 100%;overflow: hidden;position: relative;background: #F6F6F6;

        &:hover {
          background: #1f2c5c;

          .item_mask {opacity: 1;filter: Alpha(opacity=100);-webkit-transform: rotateX(0deg) scale(1, 1);transform: rotateX(0deg) scale(1, 1);transition: all 1s cubic-bezier(.23, 1, .38, 1) 0s;background: rgba(0, 0, 0, .1);}

          .item_link_icon {transform: translateY(-21px);opacity: 1;filter: Alpha(opacity=100);}

          span {
            color: #fff;
            }
          }
        }

      span {
        width: 100%;height: 45px;color: #555;text-align: center;display: block;line-height: 45px;transition: all .5s;
        }

      img {
        display: block;width: 214px;height: 160px;
        }
      }


    .item_mask {width: 287px;height: 215px;background: rgba(0, 0, 0, 0);position: absolute;left: 0;top: 0;opacity: 0;filter: Alpha(opacity=0);*zoom: 1;-webkit-transform: rotateX(180deg) scale(0.5, 0.5);transform: rotateX(180deg) scale(0.2, 0.2);transition: all ease-out .5s;}
    }
  }
</style>
